﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetailPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <link href="/css/default.css" rel="stylesheet" />
    
    <script src="../../../js/bixaps.ui.js"></script>
    <link href="../../../css/bixaps.ui.css" rel="stylesheet" />
    <link href="../../../css/bixaps.ui-dark.css" rel="stylesheet" />
    
    <link href="../../../css/itemDetail.css" rel="stylesheet" />

    <!--    <script src="/js/data.js"></script>
    <script src="/pages/itemDetail/itemDetail.js"></script>-->
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Numeric Box</span>
            </h1>
        </header>
        <div class="content" aria-label="Main content" role="main">
            <article>
                <div class="item-content">
                    <br/>
                    <h3>Numeric box without any options</h3>
                    <br/>
                    <div>
                        <span id="Span1" data-win-control="Bixaps.UI.NumericBox"></span>


                    </div>
                    <br/>
                    <h3>Numeric box with options min 5, max 25 and format currency</h3>
                    <br/>
                    <div>
                        <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	min: 5,
	max:25,
	format:'C'
}" />
                    </div>
                     <br/>
                    <h3>Numeric box with options step: 0.01, value:23.01</h3>
                    <br/>

                    <div>
                        <span id="numeric3" data-win-control="Bixaps.UI.NumericBox" data-win-options="{ step:0.01,value:23.01}"></span>


                    </div>
                  <br/>
                    <h3>Numeric box with options min:5, max:25, format:Exponent</h3>
                    <br/>

                    <div>
                        <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	min: 5,
	max:25,
	format:'E'
}" />
                    </div>
                   <br/>
                    <h3>Numeric box with options min:5, max:25, format:Percentage</h3>
                    <br/>

                    <div>
                        <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	min: 5,
	max:25,
	format:'P'
}" />
                    </div>
                      <br/>
                    <h3>Numeric box with options min:5, max:25, decimal places:1</h3>
                    <br/>

                    <div>
                        <input data-win-control="Bixaps.UI.NumericBox" data-win-options="{
	
	min:5.00,
	max:10.05,
	step:0.10,
                            decimalPlaces:3
	
}" />
                    </div>
                </div>
            </article>
        </div>
    </div>
</body>
</html>
